
<template>
  <div class="edit-main-box">
    <h2 class="flex-space-between">
      <span>页面内容</span>
      <el-button v-if="type !== 'detail'" type="primary" @click="addRow">添加</el-button>
    </h2>
    <el-card v-for="(item, index) in list" :key="`${index}${item.theme_type}`">
      <h4 class="flex-space-between align-items-center">
        <span>{{ index + 1 }}.样式: {{ lst_type.find(i => i.value === item.theme_type).label }}</span>
        <div v-if="type !== 'detail'">
          <el-button type="danger" @click="delData(list, index, '样式')">删 除</el-button>
        </div>
      </h4>
      <el-row v-for="(row, rowIndex) in item.data" :key="`row${rowIndex}`" gutter="20">
        <el-col :span="12">
          <el-form :disabled="type === 'detail'" :ref="`form${index}${rowIndex}`" :model="row" :rules="rules"
            label-position="right" label-width="100px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="row.title" placeholder="请输入" maxlength="50" />
            </el-form-item>
            <el-form-item label="详情" prop="detail">
              <el-input
              v-model="row.detail"
              placeholder="请输入"
               type="textarea"
                rows="10"
              />
            </el-form-item>
            <el-form-item label="链接" prop="url">
              <Upload :disabled="type === 'detail'" :fileList.sync="row.imgs" :limit="1" dir-name="/pages"
                @change="setUrl(row)" listType="img" />
            </el-form-item>
          </el-form>
        </el-col>
        <!-- // v-if="['3','4'].includes(item.theme_type)" -->
        <el-col :span="12" v-if="type !== 'detail'">
          <el-button type="primary" v-if="rowIndex === item.data.length - 1"
            @click="item.data.push({ title: null, detail: null, url: null })">添加数据</el-button>
          <el-button v-if="item.data.length > 1 || rowIndex > 0" type="danger"
            @click="delData(item.data, rowIndex, '数据')">删 除</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="选择样式" :visible.sync="dialogVisible" width="80%" class="theme-dialog">
      <div class="container-dialog">
        <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="1">{{ lst_type[0].label }}</el-radio>
            <el-skeleton style="width: 540px; height: 240px;">
              <template slot="template">
                <div style="padding: 14px;" class="flex-row">
                  <div class="flex1" style="padding: 0 20px;">
                    <el-skeleton-item variant="p" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" style="margin-right: 20px;width: calc(100% - 20px);" />
                    </div>
                  </div>
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
        <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="2">{{ lst_type[1].label }}</el-radio>
            <el-skeleton style="width: 540px; height: 240px;">
              <template slot="template">
                <div style="padding: 14px;" class="flex-row">
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
                  <div class="flex1" style="padding: 0 20px;">
                    <el-skeleton-item variant="p" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" style="margin-right: 20px;width: calc(100% - 20px);" />
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
        <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="3">{{ lst_type[2].label }}</el-radio>
            <el-row :gutter="20" class="flex1">
              <el-col :span="12">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :span="12">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="4">{{ lst_type[3].label }}</el-radio>
            <el-row :gutter="20" class="flex1">
              <el-col :span="8">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :span="8">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :span="8">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
            </el-row>
          </div>
        </el-card>
         <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="5">{{ lst_type[4].label }}</el-radio>
            <el-skeleton style="width: 540px; height: 240px;">
              <template slot="template">
                <div style="padding: 14px;" class="flex-row">
                  <div class="flex1" style="padding: 0 20px;">
                    <el-skeleton-item variant="p" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" style="margin-right: 20px;width: calc(100% - 20px);" />
                    </div>
                  </div>
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
        <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="6">{{ lst_type[5].label }}</el-radio>
            <el-skeleton style="width: 540px; height: 240px;">
              <template slot="template">
                <div style="padding: 14px;" class="flex-row">
                  <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
                  <div class="flex1" style="padding: 0 20px;">
                    <el-skeleton-item variant="p" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" style="margin-right: 20px;width: calc(100% - 20px);" />
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
        </el-card>
         <el-card>
          <div class="flex-row align-items-center">
            <el-radio v-model="theme_type" label="7">{{ lst_type[6].label }}</el-radio>
            <el-row :gutter="20" class="flex1">
              <el-col :span="12">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :span="12">
                <el-skeleton style="width: 100%;">
                  <template slot="template">
                    <el-skeleton-item variant="image" style="width: 100%; height: 240px;" />
                    <el-skeleton-item variant="p" style="margin-top: 10px;" />
                    <div style="margin-top: 20px;">
                      <el-skeleton-item variant="text" style="margin-left: 20px;width: calc(100% - 20px);" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                      <el-skeleton-item variant="text" />
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload'
export default {
  name: 'Page',
  components: {
    Upload
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    content: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      dialogVisible: false,
      lst_type: [
        { label: '文字左边', value: '1' },
        { label: '文字右边', value: '2' },
        { label: '一行2个', value: '3' },
        { label: '一行3个', value: '4' },
        { label: '文字左边-2', value: '5' },
        { label: '文字右边-2', value: '6' },
         {label: '一行2个-2', value: '7' }
      ],
      rules: {
        title: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      theme_type: null,
      list: [],
      imgs: []
    }
  },
  watch: {
    content: {
      handler(val) {
        this.list = val
      },
      immediate: true
    }
  },
  methods: {
    setUrl(row) {
      this.$set(row, 'image', row.imgs[0].save_url)
      row.imgs[0].url = row.imgs[0].save_url
    },
    addRow() {
      this.theme_type = null
      this.dialogVisible = true
    },
    confirm() {
      if (!this.theme_type) {
        this.$message.error('请选择样式')
        return
      }
      this.dialogVisible = false
      this.list.push({
        theme_type: this.theme_type,
        data: [
          {
            title: null,
            detail: null,
            image: null
          }
        ]
      })
    },
    async getData() {
      if (!this.list.length) {
        this.$message({
          type: 'error',
          message: '请添加内容'
        })
        return Promise.reject(false)
      }
      await this.validaters()
      return Promise.resolve(this.list)
    },
    validaters() {
      const fetchs = this.list.map(v => this.$refs[`form${v}`].validate())
      return Promise.all(fetchs)
    },
    async delData(data, index, tips) {
      await this.$confirm(`此操作将删除${tips || '数据'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      data.splice(index, 1)
    },
    getContainer() {
      let validates = []
      this.list.forEach((item, index) => {
        item.data.forEach((row, rowIndex) => {
          validates.push(this.$refs[`form${index}${rowIndex}`].validate)
        })
      })
      return new Promise((resolve, reject) => {
        Promise.all(validates).then((res) => {
          resolve(this.list)
        }).catch(() => {
          reject()
        })
      })
    }
  }
}
</script>
<style lang="scss">
.edit-main-box {
  padding: 10px;

  .theme-dialog {
    .flex-row {
      margin-bottom: 20px;
    }
  }

  .container-dialog {
    height: 60vh;
    overflow-y: auto;
  }
}
</style>
